<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <text class="title">虚拟仿真实验</text>
    </view>

    <!-- 实验类型选择 -->
    <view class="experiment-types">
      <view 
        v-for="(item, index) in experimentTypes" 
        :key="index" 
        :class="['type-item', currentType === index ? 'active' : '']"
        @tap="switchType(index)"
      >
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <template v-if="isLoading">
        <view class="loading">
          <view class="spinner"></view>
          <text>加载中...</text>
        </view>
      </template>
      <template v-else>
        <!-- WebView嵌入nobook平台 -->
        <web-view v-if="currentUrl" :src="currentUrl" @message="handleMessage" @error="handleError"></web-view>
        
        <!-- 实验分类和说明 -->
        <template v-else>
          <view class="experiment-intro">
            <image class="banner" :src="experimentTypes[currentType].banner" mode="aspectFill"></image>
            <view class="intro-text">
              <view class="intro-title">{{ experimentTypes[currentType].name }}实验平台</view>
              <view class="intro-desc">{{ experimentTypes[currentType].description }}</view>
            </view>
            
            <view class="experiment-list">
              <view 
                v-for="(exp, idx) in experimentTypes[currentType].experiments" 
                :key="idx"
                class="experiment-item"
                @tap="openExperiment(exp.url)"
              >
                <image :src="exp.icon" mode="aspectFit" class="exp-icon"></image>
                <view class="exp-info">
                  <text class="exp-name">{{ exp.name }}</text>
                  <text class="exp-desc">{{ exp.desc }}</text>
                </view>
                <text class="iconfont icon-arrow-right"></text>
              </view>
            </view>
          </view>
        </template>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      currentType: 0,
      currentUrl: '',
      experimentTypes: [
        {
          name: '物理',
          url: 'https://wl-app.nobook.com/#/app-download?type=physics',
          banner: 'http://101.37.17.240:9000/zhxy/physics_banner.jpg',
          description: '通过虚拟仿真技术，提供逼真的物理实验环境，让学生可以随时随地进行物理实验，包括力学、电学、光学等多个领域。',
          experiments: [
            { 
              name: '力学实验', 
              desc: '包含自由落体、平抛运动、摩擦力等经典力学实验',
              icon: 'http://101.37.17.240:9000/zhxy/physics_icon1.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=physics&module=mechanics'
            },
            { 
              name: '电学实验', 
              desc: '电路连接、欧姆定律、电流与电压关系等实验',
              icon: 'http://101.37.17.240:9000/zhxy/physics_icon2.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=physics&module=electricity'
            },
            { 
              name: '光学实验', 
              desc: '光的反射、折射、衍射等现象模拟实验',
              icon: 'http://101.37.17.240:9000/zhxy/physics_icon3.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=physics&module=optics'
            }
          ]
        },
        {
          name: '化学',
          url: 'https://wl-app.nobook.com/#/app-download?type=chemistry',
          banner: 'http://101.37.17.240:9000/zhxy/chemistry_banner.jpg',
          description: '为学生提供安全的化学实验环境，可进行各种化学反应模拟，观察化学变化过程，学习化学知识。',
          experiments: [
            { 
              name: '基础实验', 
              desc: '常见化学反应、分子结构观察等基础实验',
              icon: 'http://101.37.17.240:9000/zhxy/chemistry_icon1.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=chemistry&module=basic'
            },
            { 
              name: '有机化学', 
              desc: '有机物性质、有机反应机理等实验',
              icon: 'http://101.37.17.240:9000/zhxy/chemistry_icon2.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=chemistry&module=organic'
            },
            { 
              name: '分析化学', 
              desc: '滴定分析、物质检测等实验',
              icon: 'http://101.37.17.240:9000/zhxy/chemistry_icon3.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=chemistry&module=analytical'
            }
          ]
        },
        {
          name: '生物',
          url: 'https://wl-app.nobook.com/#/app-download?type=biology',
          banner: 'http://101.37.17.240:9000/zhxy/biology_banner.jpg',
          description: '通过3D模型和交互式实验，让学生深入了解生物结构、功能及生命过程，包括细胞观察、解剖实验等。',
          experiments: [
            { 
              name: '细胞观察', 
              desc: '细胞结构、细胞分裂等微观实验',
              icon: 'http://101.37.17.240:9000/zhxy/biology_icon1.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=biology&module=cell'
            },
            { 
              name: '植物实验', 
              desc: '植物结构、光合作用等植物学实验',
              icon: 'http://101.37.17.240:9000/zhxy/biology_icon2.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=biology&module=plant'
            },
            { 
              name: '动物解剖', 
              desc: '虚拟解剖实验，观察动物器官结构',
              icon: 'http://101.37.17.240:9000/zhxy/biology_icon3.png',
              url: 'https://wl-app.nobook.com/#/app-download?type=biology&module=anatomy'
            }
          ]
        },
        {
          name: '直接访问',
          url: 'https://wl-app.nobook.com/',
          banner: 'http://101.37.17.240:9000/zhxy/nobook_banner.jpg',
          description: '直接访问nobook平台，体验全部虚拟实验资源。包含物理、化学、生物等多个学科的实验，支持在线操作。',
          experiments: [
            { 
              name: 'nobook平台', 
              desc: '访问完整的nobook虚拟实验平台',
              icon: 'http://101.37.17.240:9000/zhxy/nobook_icon.png',
              url: 'https://wl-app.nobook.com/'
            }
          ]
        }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    switchType(index) {
      this.currentType = index
      this.currentUrl = '' // 切换分类时先清空URL，显示介绍页
    },
    openExperiment(url) {
      this.isLoading = true
      this.currentUrl = url
      
      // 模拟加载过程，实际使用中可以根据webview的加载事件来处理
      setTimeout(() => {
        this.isLoading = false
      }, 1500)
    },
    handleMessage(e) {
      console.log('收到webview消息:', e.detail)
    },
    handleError(e) {
      console.error('webview错误:', e.detail)
      uni.showToast({
        title: '加载实验平台失败',
        icon: 'none'
      })
      this.isLoading = false
      this.currentUrl = ''
    },
    // 直接打开nobook平台
    openNobookPlatform() {
      this.openExperiment('https://wl-app.nobook.com/')
    }
  },
  // 页面加载时检查参数，可以通过参数直接打开特定实验
  onLoad(options) {
    if (options.direct === 'true') {
      this.currentType = 3 // 直接访问
      this.openNobookPlatform()
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #4080ff;
  padding: 0 30rpx;
  color: #fff;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .iconfont {
      font-size: 40rpx;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding-right: 60rpx; // 平衡左侧返回按钮的宽度
  }
}

.experiment-types {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .type-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #4080ff;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #4080ff;
      }
    }
  }
}

.content {
  flex: 1;
  position: relative;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10;
  
  .spinner {
    width: 60rpx;
    height: 60rpx;
    border: 6rpx solid #f3f3f3;
    border-top: 6rpx solid #4080ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

.experiment-intro {
  padding: 20rpx;
  
  .banner {
    width: 100%;
    height: 300rpx;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
  }
  
  .intro-text {
    margin-bottom: 30rpx;
    
    .intro-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .intro-desc {
      font-size: 26rpx;
      color: #666;
      line-height: 1.5;
    }
  }
}

.experiment-list {
  .experiment-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .exp-icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
    }
    
    .exp-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      
      .exp-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .exp-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .icon-arrow-right {
      font-size: 32rpx;
      color: #ccc;
    }
  }
}

web-view {
  width: 100%;
  height: calc(100vh - 170rpx); // 减去顶部导航和选项卡的高度
}
</style> 